<template>
    <div class="container">
        <header>
            <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
                <!-- 把搜索框放到中间 title 插槽 -->
                <template #title>
                    <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" style="width: 100%;" />
                </template>
            </van-nav-bar>
        </header>
        <main>
            <div class="left">
                <kind-list :kind-list="kindList" @my-click="handle"></kind-list>
            </div>
            <div class="right">
                <ChildrenList :children-list="ChildrenList" @select-index="idx => currentIdx = idx"></ChildrenList>
            </div>
            
        </main>
    </div>
</template>

<script>
import kindList from './components/KindList.vue';
import ChildrenList from './components/ChildrenList.vue';
import { getKindList } from '@/apis/kind';
export default {
    data() {
        return {
            value: '',
            kindList: [],
            ChildrenList:[],
            currentIdx: 0,
            
        }
    },
    components: {
        kindList,
        ChildrenList
    },
    methods: {
        onClickLeft() {
            history.back()
        },
        handle(index){
            console.log(index);
            this.currentIdx = index
            this.ChildrenList=this.kindList[this.currentIdx].children
            // console.log(this.childrenList);
            
        }
    },
    created() {
        getKindList({ count: this.count, limitNum: this.limitNum }).then(res => {
            let msg=res.data.data
            this.kindList = msg
            // console.log(msg);
            this.ChildrenList=msg[this.currentIdx].children
            // console.log( this.ChildrenList);
            
            
        })
    }
};

</script>

<style scoped>
/* 让导航栏高度跟搜索框对齐 */
::v-deep(.van-nav-bar__title) {
    height: 100%;
}

main {
    display: flex;
    .right {
        flex: 1;
        padding: 10px;
    }
}
</style>